<template>
  <div class="group1">
    <span class="directions hover-style" @click="toHome">Home</span>
    <span class="teachers hover-style" @click="toRecommendPage">Recommend</span>
    <span class="company hover-style" @click="toWorkstationPage">Workstation</span>
    <span class="shop hover-style" @click="toShopPage">Shop</span>
    <span class="contacts hover-style" @click="toIndividualPage">Individual</span>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      constants: {}
    }
  },
  methods: {

    toHome() {
      this.$router.push("/")
    }, toRecommendPage() {
      this.$router.push("/recommend")
    }, toWorkstationPage() {
      this.$router.push("/piano")
    }, toShopPage() {
      this.$router.push("/shop")
    }, toIndividualPage() {
      this.$router.push("/individualPage")
    },
  },

}
</script>

<style src="./css/Navigation.css" scoped/>
;